@import "@/app/styles";

.Message {
  $this: &;
  margin-top: 8px;

  &:first-child {
    margin-top: 0;
  }

  &-Block {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }

  &-Username {
    color: $color-pink;
  }

  &-Content {
    background-color: $color-pink;
    max-width: max-content;
    display: flex;
    flex-direction: column;
    padding: 8px;
    border-radius: 10px 10px 0 10px;
  }

  &-UserInfo {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  &-Footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: $color-gray;
  }

  &-Avatar {
    margin-right: 8px;
  }

  &-Text {
  }

  &__isReceiver {
    #{$this}-Block {
      justify-content: flex-start;
    }

    #{$this}-Content {
      background-color: $color-primary;
      border-radius: 10px 10px 10px 0;
    }
  }
}
